<template>
	<!-- 优惠团购列表 -->
	<CustomNavbar>
		<view class="navbar-content">
			<!-- 左侧返回按钮 -->
			<view class="nav-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<!-- 中间标题 -->
			<view class="nav-title">团购优惠</view>
		</view>
	</CustomNavbar>

	<!-- 优惠列表 -->
	<view class="discount-container">
		<view class="discount-list">
			<view class="discount-card" v-for="(item, index) in discountList" :key="index">
				<!-- 横幅图片 -->
				<view class="banner-wrapper">
					<image :src="item.banner" class="banner-image" mode="aspectFill" />
				</view>
				<!-- 描述和详情 -->
				<view class="card-footer">
					<text class="card-description">{{ item.description }}</text>
					<text class="card-detail" @click="goToDetail(item)">详情</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue'

	// 返回按钮
	const goBack = () => {
		uni.navigateBack()
	}

	// 跳转到详情页
	const goToDetail = (item) => {
		uni.navigateTo({
			url: `/pages/index/DiscountPage/DiscountPage?id=${item.id}`,
			fail: () => {
				uni.showToast({
					title: '页面未找到',
					icon: 'none'
				})
			}
		})
	}

	// 优惠列表数据
	const discountList = ref([{
			id: 1,
			banner: '/static/10011.jpg',
			description: '汽车惠民活动走进......'
		},
		{
			id: 2,
			banner: '/static/10015.jpg',
			description: '汽车惠民活动走进......'
		},
		{
			id: 3,
			banner: '/static/10040.jpg',
			description: '汽车惠民活动走进......'
		},
		{
			id: 4,
			banner: '/static/10043.jpg',
			description: '汽车惠民活动走进......'
		}
	])
</script>

<style scoped>
	/* 导航栏内容样式 */
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		position: relative;
		margin: 0 -24rpx;
		padding: 0 24rpx;
	}

	.nav-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 88rpx;
	}

	.back-icon {
		color: #fff;
		font-size: 56rpx;
		font-weight: 300;
		line-height: 88rpx;
		transform: scaleY(1.3);
		cursor: pointer;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 88rpx;
	}



	/* 优惠容器 */
	.discount-container {
		/* background-color: #fff; */
		/* min-height: calc(100vh - 176rpx); */
		padding: 20rpx;
		position: absolute;
		width: 100%;
		top: 200rpx;
	}

	.discount-list {
		padding: 0;
	}

	/* 优惠卡片 */
	.discount-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.banner-wrapper {
		width: 100%;
		height: 340rpx;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 30rpx;
		background-color: #fff;
	}

	.card-description {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		line-height: 40rpx;
	}

	.card-detail {
		font-size: 28rpx;
		color: #2f80ed;
		margin-left: 20rpx;
		cursor: pointer;
		font-weight: 500;
	}
</style>